{% extends "exam_system/base_exam.html" %}

{% block title %}我的考试列表{% endblock %}

{% block content %}
<div class="container py-4">
    <h2 class="mb-4">我的考试</h2>

    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#upcoming" data-bs-toggle="tab">即将开始</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#ongoing" data-bs-toggle="tab">进行中</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#finished" data-bs-toggle="tab">已完成</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="upcoming">
                            {% for registration in upcoming_exams %}
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h5 class="card-title">{{ registration.exam_room.name }}</h5>
                                    <p class="card-text">
                                        <small class="text-muted">
                                            开始时间：{{ registration.exam_room.start_time|date:"Y-m-d H:i" }}<br>
                                            考试时长：{{ registration.exam_room.duration }}分钟<br>
                                            考试总分：{{ registration.exam_room.total_score }} 分<br>
                                            题型信息：<br>
                                            {% for type_info in registration.question_types %}
                                                &nbsp;&nbsp;- {{ type_info }}<br>
                                            {% endfor %}
                                        </small>
                                    </p>
                                    <div class="countdown" data-start="{{ registration.exam_room.start_time|date:'Y-m-d H:i:s' }}">
                                        距离考试开始还有：<span class="time-remaining"></span>
                                    </div>
                                </div>
                            </div>
                            {% empty %}
                            <p class="text-muted">暂无即将开始的考试</p>
                            {% endfor %}
                        </div>

                        <div class="tab-pane fade" id="ongoing">
                            {% for registration in ongoing_exams %}
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h5 class="card-title">{{ registration.exam_room.name }}</h5>
                                    <p class="card-text">
                                        <small class="text-muted">
                                            开始时间：{{ registration.exam_room.start_time|date:"Y-m-d H:i" }}<br>
                                            结束时间：{{ registration.exam_room.end_time|date:"Y-m-d H:i" }}
                                        </small>
                                    </p>
                                    <a href="{% url 'exam_system:take_exam' registration.exam_room.id %}"
                                       class="btn btn-primary">进入考试</a>
                                </div>
                            </div>
                            {% empty %}
                            <p class="text-muted">暂无进行中的考试</p>
                            {% endfor %}
                        </div>

                        <div class="tab-pane fade" id="finished">
                            {% for registration in finished_exams %}
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h5 class="card-title">{{ registration.exam_room.name }}</h5>
                                    <p class="card-text">
                                        <small class="text-muted">
                                            考试时间：{{ registration.exam_room.start_time|date:"Y-m-d H:i" }}<br>
                                            得分：{{ registration.exam_paper.total_score }}
                                        </small>
                                    </p>
                                    <a href="{% url 'exam_system:exam_result' registration.exam_room.id %}"
                                       class="btn btn-secondary">查看详情</a>
                                </div>
                            </div>
                            {% empty %}
                            <p class="text-muted">暂无已完成的考试</p>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">考试须知</h5>
                </div>
                <div class="card-body">
                    <ol class="ps-3">
                        <li>请确保网络连接稳定</li>
                        <li>请提前调试好电脑音量</li>
                        <li>确保考试环境安静无干扰</li>
                        <li>准备好身份证等证件</li>
                        <li>仔细阅读考试要求和注意事项</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% load exam_filters %}

{% block extra_js %}
<script>
// 根据URL参数激活对应的标签页
$(document).ready(function() {
    // 获取URL参数
    const urlParams = new URLSearchParams(window.location.search);
    const filter = urlParams.get('filter');

    // 如果有filter参数，激活对应标签页
    if (filter === 'finished') {
        $('.nav-tabs a[href="#finished"]').tab('show');
    } else if (filter === 'ongoing') {
        $('.nav-tabs a[href="#ongoing"]').tab('show');
    } else if (filter === 'upcoming') {
        $('.nav-tabs a[href="#upcoming"]').tab('show');
    }
});

// 定期检查考试状态
function checkExamStatus() {
    $.ajax({
        url: '{% url "exam_system:check_exam_status" %}',
        method: 'GET',
        success: function(response) {
            if (response.status === 'success') {
                // 处理新开始的考试
                if (response.newly_started.length > 0) {
                    // 刷新页面以显示新的考试状态
                    location.reload();
                    return;
                }

                // 处理新结束的考试
                if (response.newly_ended.length > 0) {
                    // 刷新页面以更新考试状态
                    location.reload();
                    return;
                }
            }
        },
        error: function(xhr, status, error) {
            console.error("检查考试状态失败:", error);
        }
    });
}

// 每30秒检查一次考试状态
setInterval(checkExamStatus, 30000);

function updateCountdowns() {
    $('.countdown').each(function() {
        const startTime = new Date($(this).data('start'));
        const now = new Date();
        const diff = startTime - now;

        if (diff <= 0) {
            $(this).html('<span class="text-success">考试已开始</span>');
            location.reload();  // 考试开始时刷新页面
            return;
        }

        const hours = Math.floor(diff / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);

        $(this).find('.time-remaining').text(
            `${hours}小时${minutes}分钟${seconds}秒`
        );
    });
}

// 每秒更新倒计时
setInterval(updateCountdowns, 1000);
// 立即执行一次更新
updateCountdowns();
</script>
{% endblock %}